<template>
  <div>
    <el-tree
      :data="areaPlaceList"
      :props="{ label: 'Name', isLeaf: 'isLeaf' }"
      :expand-on-click-node="false"
      ref="treeRef"
      node-key="ID"
      highlight-current
      :load="loadNode"
      lazy
      @node-click="handleNodeClick"
    ></el-tree>
  </div>
</template>

<script setup name="AreaPlace">
import { GetAreaList_Page } from "@/api/school/region";
import { GetPlaceList_Page } from "@/api/site/index.js";
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    default: {},
  },
});
const areaPlaceList = ref([]);

async function loadNode(node, resolve) {
  try {
    let res;
    if (node.level == 0) {
      res = await GetAreaList_Page({ NoPage: "true" });
      res.data?.forEach((item) => (item.isLeaf = false));
    } else {
      res = await GetPlaceList_Page({ NoPage: "true", ID_Area: node.data.ID });
      res.data?.forEach((item) => (item.isLeaf = true));
    }
    let list = res.data;
    resolve(list);
  } catch (error) {
    console.log(error);
  }
}
function handleNodeClick(node) {
  emit("update:modelValue", node);
}
</script>

<style lang="scss" scoped></style>
